<template>
  <header class="header">
    <div class="logo">
      <button @click="anmin"><img src="/logo.png" alt="Logo" /></button>
      <AdminLogin v-if="adm"></AdminLogin>
    </div>
    <nav class="nav">
      <ul>
        <li>
          <RouterLink to="/" class="Router">首页</RouterLink>
        </li>
        <li>
          <RouterLink to="/foreign" class="Router">国际</RouterLink>
        </li>
        <li>
          <RouterLink to="/civil" class="Router">国内</RouterLink>
        </li>
        <li>
          <RouterLink to="/finance" class="Router">财经</RouterLink>
        </li>
        <li>
          <RouterLink to="/technology" class="Router">科技</RouterLink>
        </li>
        <li>
          <select class="select-menu" @change="handleSelectChange">
            <option value="/update">更多</option>
            <option value="/update">教育</option>
            <option value="/update">体育</option>
            <option value="/update">娱乐</option>
          </select>
        </li>
        <li>
          <button @click="log"><img class="log" src="/user.jpg" alt="user" /></button>
          <Login v-if="props"></Login>
        </li>
      </ul>
    </nav>
    <div class="search">
      <input type="text" v-model="searchQuery" placeholder="搜索" @keyup.enter="handleSearch" />
    </div>
  </header>
   <br>
  <RouterView></RouterView>
  <br> 
  <footer class="footer">
    <p>&copy; ECUT 512 News. All rights reserved.</p>
    <div class="social-links">
      合作伙伴:<a class="link" href="http://www.seecen.com/">SiCheng</a>
    </div>
  </footer>
</template>

<script setup>
import { ref,onMounted} from 'vue';  // 导入 ref 来创建响应式数据
import { useRouter } from 'vue-router';  // 导入 useRouter 钩子，用于进行路由跳转
import Login from '@/components/Login.vue';
import AdminLogin from './AdminLogin.vue';
const props = ref(false)
const adm = ref(false)
const searchQuery = ref('');  // 创建响应式的 searchQuery 变量来保存搜索内容

const router = useRouter();  // 获取 Vue Router 的实例
function log() {
  props.value = true
}
function anmin() {
  adm.value = true
}
const handleSearch = () => {
  // 只有当 searchQuery 非空时才进行跳转
  if (searchQuery.value.trim()) {
    // router.push(`/search?query=${searchQuery.value}`);
    router.push({ path: 'select', query: { searchQuery: searchQuery.value } })
  }
};
</script>

<style scoped>
.log {
  height: 22px;
}

.Router:hover {
  color: rgb(193, 9, 9);
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
}

.logo img {
  height: 50px;
}

.nav ul {
  display: flex;
  list-style: none;
}

.nav li {
  margin-right: 20px;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

/* Styling the select dropdown */
.select-menu {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
}

.select-menu:focus {
  outline: none;
  border-color: #aaa;
}

.search input {
  padding: 5px;
  border: none;
  border-radius: 4px;
}

.footer {
  padding: 20px;
  background-color: #333;
  color: #fff;
  text-align: center;
}

.footer .social-links a {
  margin-right: 10px;
  /* color: #fff; */
  text-decoration: none;
}

.link:hover {
  color: red;
}

a {
  color: inherit;
}
</style>